<!DOCTYPE html>

<html
  xmlns="http://www.w3.org/1999/xhtml"
  >
  <head>
    <title>Sankey diagram &#8211; from Data to Viz</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="pandoc" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta
      name="description"
      content="An extensive description of Sankey
diagram. Definition, examples, input data, common caveats, tool to build it and potential alternatives."
    />
    <meta
      name="keywords"
      content="Data,Dataviz,Datavisualization,Plot,Chart,Graph,R,Python,D3,Learning,Caveat,Pitfall,Mistake,Classification"
    />
    <meta name="author" content="Yan Holtz and Conor Healy" />
    <link rel="icon" href="img/logo/data-to-viz.ico" />

    <!-- Control appearance when share by social media -->
    <meta property="og:title" content="Sankey diagram" />
    <meta
      property="og:image"
      content="https://github.com/holtzy/data_to_viz/raw/master/img/section/SankeySmall.png"
    />
    <meta
      property="og:description"
      content="An extensive description of Sankey
diagram. Definition, examples, input data, common caveats, tool to build it and potential alternatives."
    />
    <meta
      property="og:url"
      content="www.data-to-viz.com/caveat/sankey.html"
    />
    <meta property="og:type" content="website" />

    <style>
      .myheader {
        background-image: url("https://github.com/holtzy/data_to_viz/raw/master/img/overview_RGG_faded.png");
        min-height: 300px;
        background-size: 100% 100%;

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        height: 100%;
        width: 100% !important;
      }
      .mytitle {
        text-transform: uppercase;
        font-family: "Montserrat";
        font-size: 200%;
        font-weight: 500;
        letter-spacing: 4px;
      }
    </style>

    <div class="myheader" style="text-align: center">
      <br />
      <a href="http://www.data-to-viz.com"
        ><img
          align="left"
          src="https://github.com/holtzy/data_to_viz/raw/master/img/logo/typo.png"
          style="width: 150px; vertical-align: top; margin-left: 5%"
      /></a>
      <br /><br />
      <br /><br />
      <a href="http://www.data-to-viz.com">
        <img
          src="https://github.com/holtzy/data_to_viz/raw/master/img/section/SankeySmall.png"
      /></a>
      <br /><br />
      <p class="mytitle">Sankey diagram</p>
      <p style="color: #d0d0d0">
        <a href="#definition">definition</a> - <a href="#mistake">mistake</a> -
        <a href="#related">related</a> -
        <a href="#code">code</a>
      </p>
    </div>

         <script src="libs/header-attrs-2.27/header-attrs.js"></script>
<script src="libs/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="libs/bootstrap-3.3.5/css/lumen.min.css" rel="stylesheet" />
<script src="libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<style>h1 {font-size: 34px;}
       h1.title {font-size: 38px;}
       h2 {font-size: 30px;}
       h3 {font-size: 24px;}
       h4 {font-size: 18px;}
       h5 {font-size: 16px;}
       h6 {font-size: 12px;}
       code {color: inherit; background-color: rgba(0, 0, 0, 0.04);}
       pre:not([class]) { background-color: white }</style>
<script src="libs/navigation-1.1/tabsets.js"></script>
<script src="libs/navigation-1.1/codefolding.js"></script>
<link href="libs/pagedtable-1.1/css/pagedtable.css" rel="stylesheet" />
<script src="libs/pagedtable-1.1/js/pagedtable.js"></script>
<link href="libs/htmltools-fill-0.5.8.1/fill.css" rel="stylesheet" />
<script src="libs/htmlwidgets-1.6.4/htmlwidgets.js"></script>
<script src="libs/d3-4.5.0/d3.min.js"></script>
<script src="libs/sankey-1/sankey.js"></script>
<script src="libs/sankeyNetwork-binding-0.4/sankeyNetwork.js"></script>       <style type="text/css">
      code {
        white-space: pre;
      }
    </style>
    <style type="text/css">
      pre > code.sourceCode { white-space: pre; position: relative; }
      pre > code.sourceCode > span { line-height: 1.25; }
      pre > code.sourceCode > span:empty { height: 1.2em; }
      .sourceCode { overflow: visible; }
      code.sourceCode > span { color: inherit; text-decoration: inherit; }
      div.sourceCode { margin: 1em 0; }
      pre.sourceCode { margin: 0; }
      @media screen {
      div.sourceCode { overflow: auto; }
      }
      @media print {
      pre > code.sourceCode { white-space: pre-wrap; }
      pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
      }
      pre.numberSource code
        { counter-reset: source-line 0; }
      pre.numberSource code > span
        { position: relative; left: -4em; counter-increment: source-line; }
      pre.numberSource code > span > a:first-child::before
        { content: counter(source-line);
          position: relative; left: -1em; text-align: right; vertical-align: baseline;
          border: none; display: inline-block;
          -webkit-touch-callout: none; -webkit-user-select: none;
          -khtml-user-select: none; -moz-user-select: none;
          -ms-user-select: none; user-select: none;
          padding: 0 4px; width: 4em;
          color: #aaaaaa;
        }
      pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
      div.sourceCode
        {   }
      @media screen {
      pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
      }
      code span.al { color: #ff0000; font-weight: bold; } /* Alert */
      code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
      code span.at { color: #7d9029; } /* Attribute */
      code span.bn { color: #40a070; } /* BaseN */
      code span.bu { color: #008000; } /* BuiltIn */
      code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
      code span.ch { color: #4070a0; } /* Char */
      code span.cn { color: #880000; } /* Constant */
      code span.co { color: #60a0b0; font-style: italic; } /* Comment */
      code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
      code span.do { color: #ba2121; font-style: italic; } /* Documentation */
      code span.dt { color: #902000; } /* DataType */
      code span.dv { color: #40a070; } /* DecVal */
      code span.er { color: #ff0000; font-weight: bold; } /* Error */
      code span.ex { } /* Extension */
      code span.fl { color: #40a070; } /* Float */
      code span.fu { color: #06287e; } /* Function */
      code span.im { color: #008000; font-weight: bold; } /* Import */
      code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
      code span.kw { color: #007020; font-weight: bold; } /* Keyword */
      code span.op { color: #666666; } /* Operator */
      code span.ot { color: #007020; } /* Other */
      code span.pp { color: #bc7a00; } /* Preprocessor */
      code span.sc { color: #4070a0; } /* SpecialChar */
      code span.ss { color: #bb6688; } /* SpecialString */
      code span.st { color: #4070a0; } /* String */
      code span.va { color: #19177c; } /* Variable */
      code span.vs { color: #4070a0; } /* VerbatimString */
      code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
            div.sourceCode {
        overflow-x: visible;
      }
          </style>
        <style type="text/css">
      pre:not([class]) {
        background-color: white;
      }
    </style>
           <style type="text/css">
      h1 {
        font-size: 34px;
      }
      h1.title {
        font-size: 38px;
      }
      h2 {
        font-size: 30px;
      }
      h3 {
        font-size: 24px;
      }
      h4 {
        font-size: 18px;
      }
      h5 {
        font-size: 16px;
      }
      h6 {
        font-size: 12px;
      }
      .table th:not([align]) {
        text-align: left;
      }
          </style>
         <link
      rel="stylesheet"
      href="style.css"
      type="text/css"
      
    />
      </head>

  <body>
        <style type="text/css">
      .main-container {
        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
      }
      code {
        color: inherit;
        background-color: rgba(0, 0, 0, 0.04);
      }
      img {
        max-width: 100%;
        height: auto;
      }
      .tabbed-pane {
        padding-top: 12px;
      }
      button.code-folding-btn:focus {
        outline: none;
      }
    </style>

     
    <div class="container-fluid main-container">
      <!-- tabsets -->
      <script>
        $(document).ready(function () {
          window.buildTabsets("TOC");
        });
      </script>

      <!-- code folding -->
            <style type="text/css">
        .code-folding-btn {
          margin-bottom: 4px;
        }
      </style>
      <script>
        $(document).ready(function () {
                          window.initializeCodeFolding("hide" === "show");
                });
      </script>
         
                    <div class="fluid-row" id="header">
                        <div class="btn-group pull-right">
              <button
                type="button"
                class="btn btn-default btn-xs dropdown-toggle"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                <span>Show Code</span> <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" style="min-width: 50px">
                                <li><a id="rmd-show-all-code" href="#">Show All Code</a></li>
                <li><a id="rmd-hide-all-code" href="#">Hide All Code</a></li>
                                </ul>
            </div>

                         </div>

              <div class="mycontent">
<div id="definition" class="section level1">
<h1>Definition</h1>
<hr />
<p>A <code>Sankey Diagram</code> is a visualisation technique that
allows to display flows. Several entities (<code>nodes</code>) are
represented by rectangles or text. Their links are represented with
arrow or arcs that have a width proportional to the importance of the
flow.</p>
<p>Here is an example displaying the number of people migrating from one
country (left) to another (right). Data used comes from this <a
href="https://onlinelibrary.wiley.com/doi/abs/10.1111/imre.12327">scientific
publication</a>.</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" tabindex="-1"></a><span class="co"># Libraries</span></span>
<span id="cb1-2"><a href="#cb1-2" tabindex="-1"></a><span class="fu">library</span>(tidyverse)</span>
<span id="cb1-3"><a href="#cb1-3" tabindex="-1"></a><span class="fu">library</span>(viridis)</span>
<span id="cb1-4"><a href="#cb1-4" tabindex="-1"></a><span class="fu">library</span>(patchwork)</span>
<span id="cb1-5"><a href="#cb1-5" tabindex="-1"></a><span class="fu">library</span>(hrbrthemes)</span>
<span id="cb1-6"><a href="#cb1-6" tabindex="-1"></a><span class="fu">library</span>(circlize)</span>
<span id="cb1-7"><a href="#cb1-7" tabindex="-1"></a></span>
<span id="cb1-8"><a href="#cb1-8" tabindex="-1"></a><span class="co"># Load dataset from github</span></span>
<span id="cb1-9"><a href="#cb1-9" tabindex="-1"></a>data <span class="ot">&lt;-</span> <span class="fu">read.table</span>(<span class="st">&quot;https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/13_AdjacencyDirectedWeighted.csv&quot;</span>, <span class="at">header=</span><span class="cn">TRUE</span>)</span>
<span id="cb1-10"><a href="#cb1-10" tabindex="-1"></a><span class="co"># Package</span></span>
<span id="cb1-11"><a href="#cb1-11" tabindex="-1"></a><span class="fu">library</span>(networkD3)</span>
<span id="cb1-12"><a href="#cb1-12" tabindex="-1"></a></span>
<span id="cb1-13"><a href="#cb1-13" tabindex="-1"></a><span class="co"># I need a long format</span></span>
<span id="cb1-14"><a href="#cb1-14" tabindex="-1"></a>data_long <span class="ot">&lt;-</span> data <span class="sc">%&gt;%</span></span>
<span id="cb1-15"><a href="#cb1-15" tabindex="-1"></a>  rownames_to_column <span class="sc">%&gt;%</span></span>
<span id="cb1-16"><a href="#cb1-16" tabindex="-1"></a>  <span class="fu">gather</span>(<span class="at">key =</span> <span class="st">&#39;key&#39;</span>, <span class="at">value =</span> <span class="st">&#39;value&#39;</span>, <span class="sc">-</span>rowname) <span class="sc">%&gt;%</span></span>
<span id="cb1-17"><a href="#cb1-17" tabindex="-1"></a>  <span class="fu">filter</span>(value <span class="sc">&gt;</span> <span class="dv">0</span>)</span>
<span id="cb1-18"><a href="#cb1-18" tabindex="-1"></a><span class="fu">colnames</span>(data_long) <span class="ot">&lt;-</span> <span class="fu">c</span>(<span class="st">&quot;source&quot;</span>, <span class="st">&quot;target&quot;</span>, <span class="st">&quot;value&quot;</span>)</span>
<span id="cb1-19"><a href="#cb1-19" tabindex="-1"></a>data_long<span class="sc">$</span>target <span class="ot">&lt;-</span> <span class="fu">paste</span>(data_long<span class="sc">$</span>target, <span class="st">&quot; &quot;</span>, <span class="at">sep=</span><span class="st">&quot;&quot;</span>)</span>
<span id="cb1-20"><a href="#cb1-20" tabindex="-1"></a></span>
<span id="cb1-21"><a href="#cb1-21" tabindex="-1"></a><span class="co"># From these flows we need to create a node data frame: it lists every entities involved in the flow</span></span>
<span id="cb1-22"><a href="#cb1-22" tabindex="-1"></a>nodes <span class="ot">&lt;-</span> <span class="fu">data.frame</span>(<span class="at">name=</span><span class="fu">c</span>(<span class="fu">as.character</span>(data_long<span class="sc">$</span>source), <span class="fu">as.character</span>(data_long<span class="sc">$</span>target)) <span class="sc">%&gt;%</span> <span class="fu">unique</span>())</span>
<span id="cb1-23"><a href="#cb1-23" tabindex="-1"></a></span>
<span id="cb1-24"><a href="#cb1-24" tabindex="-1"></a><span class="co"># With networkD3, connection must be provided using id, not using real name like in the links dataframe.. So we need to reformat it.</span></span>
<span id="cb1-25"><a href="#cb1-25" tabindex="-1"></a>data_long<span class="sc">$</span>IDsource<span class="ot">=</span><span class="fu">match</span>(data_long<span class="sc">$</span>source, nodes<span class="sc">$</span>name)<span class="sc">-</span><span class="dv">1</span></span>
<span id="cb1-26"><a href="#cb1-26" tabindex="-1"></a>data_long<span class="sc">$</span>IDtarget<span class="ot">=</span><span class="fu">match</span>(data_long<span class="sc">$</span>target, nodes<span class="sc">$</span>name)<span class="sc">-</span><span class="dv">1</span></span>
<span id="cb1-27"><a href="#cb1-27" tabindex="-1"></a></span>
<span id="cb1-28"><a href="#cb1-28" tabindex="-1"></a><span class="co"># prepare colour scale</span></span>
<span id="cb1-29"><a href="#cb1-29" tabindex="-1"></a>ColourScal <span class="ot">=</span><span class="st">&#39;d3.scaleOrdinal() .range([&quot;#FDE725FF&quot;,&quot;#B4DE2CFF&quot;,&quot;#6DCD59FF&quot;,&quot;#35B779FF&quot;,&quot;#1F9E89FF&quot;,&quot;#26828EFF&quot;,&quot;#31688EFF&quot;,&quot;#3E4A89FF&quot;,&quot;#482878FF&quot;,&quot;#440154FF&quot;])&#39;</span></span>
<span id="cb1-30"><a href="#cb1-30" tabindex="-1"></a></span>
<span id="cb1-31"><a href="#cb1-31" tabindex="-1"></a><span class="co"># Make the Network</span></span>
<span id="cb1-32"><a href="#cb1-32" tabindex="-1"></a><span class="fu">sankeyNetwork</span>(<span class="at">Links =</span> data_long, <span class="at">Nodes =</span> nodes,</span>
<span id="cb1-33"><a href="#cb1-33" tabindex="-1"></a>                     <span class="at">Source =</span> <span class="st">&quot;IDsource&quot;</span>, <span class="at">Target =</span> <span class="st">&quot;IDtarget&quot;</span>,</span>
<span id="cb1-34"><a href="#cb1-34" tabindex="-1"></a>                     <span class="at">Value =</span> <span class="st">&quot;value&quot;</span>, <span class="at">NodeID =</span> <span class="st">&quot;name&quot;</span>,</span>
<span id="cb1-35"><a href="#cb1-35" tabindex="-1"></a>                     <span class="at">sinksRight=</span><span class="cn">FALSE</span>, <span class="at">colourScale=</span>ColourScal, <span class="at">nodeWidth=</span><span class="dv">40</span>, <span class="at">fontSize=</span><span class="dv">13</span>, <span class="at">nodePadding=</span><span class="dv">20</span>)</span></code></pre></div>
<div class="sankeyNetwork html-widget html-fill-item" id="htmlwidget-a399b39e07ab9cedd713" style="width:960px;height:672px;"></div>
<script type="application/json" data-for="htmlwidget-a399b39e07ab9cedd713">{"x":{"links":{"source":[0,1,2,3,0,1,4,5,6,7,2,3,8,9,5,6,0,1,5,2,3,9,0,1,7,2,3,2,1,3,8,0,1,2,9],"target":[10,11,11,11,12,12,12,12,12,12,12,12,12,12,13,13,14,14,14,14,14,14,15,15,15,15,15,16,17,17,18,19,19,19,19],"value":[3.142471,1.630997,0.525881,0.145264,2.107883,0.601265,2.401476,1.762587,1.215929,0.17037,1.390272,0.468762,0.60923,0.449623,0.879198,0.276908,0.540887,0.97306,3.627847,1.508008,1.057904,0.169274,0.155988,0.333608,0.190706,0.34742,0.278746,1.307907,0.380388,0.781316,1.870501,0.673004,0.8693109999999999,4.902081,0.927243]},"nodes":{"name":["Africa","East Asia","South Asia","South East Asia","Europe","Latin America","North America","Oceania","Soviet Union","West Asia","Africa ","East.Asia ","Europe ","Latin.America ","North.America ","Oceania ","South.Asia ","South.East.Asia ","Soviet.Union ","West.Asia "],"group":["Africa","East Asia","South Asia","South East Asia","Europe","Latin America","North America","Oceania","Soviet Union","West Asia","Africa ","East.Asia ","Europe ","Latin.America ","North.America ","Oceania ","South.Asia ","South.East.Asia ","Soviet.Union ","West.Asia "]},"options":{"NodeID":"name","NodeGroup":"name","LinkGroup":null,"colourScale":"d3.scaleOrdinal() .range([\"#FDE725FF\",\"#B4DE2CFF\",\"#6DCD59FF\",\"#35B779FF\",\"#1F9E89FF\",\"#26828EFF\",\"#31688EFF\",\"#3E4A89FF\",\"#482878FF\",\"#440154FF\"])","fontSize":13,"fontFamily":null,"nodeWidth":40,"nodePadding":20,"units":"","margin":{"top":null,"right":null,"bottom":null,"left":null},"iterations":32,"sinksRight":false}},"evals":[],"jsHooks":[]}</script>
<p><em>Note</em>: an <em>Alluvial diagram</em> is a sub category of
Sankey diagrams where nodes are grouped in vertical nodes (sometimes
called steps). In many cases, these steps represent different time
stamp. Note that there are confusions on this topic as illustrated in
this <a
href="https://twitter.com/visualisingdata/status/580742089484439552?lang=fr">twitter
discussion</a>. Please reach me out if you have a better definition.</p>
</div>
<div id="what-for" class="section level1">
<h1>What for</h1>
<hr />
<p>Sankey diagrams are used to show weighted networks, i.e. flows. It
can happen with several data structure:</p>
<ul>
<li><p><em>evolution</em>: the nodes are duplicated in 2 or more groups
that represent stages. Connections show the evolution between two
states, like in the migration example above. This is more often
visualized as a <a
href="https://www.data-to-viz.com/graph/chord.html">chord
diagram</a>.</p></li>
<li><p><em>source to end</em>: consider a total amount, the diagram
shows where it comes from and where it ends up, with possible
intermediate steps. Each node is unique. (Example coming from the <a
href="https://christophergandrud.github.io/networkD3/">networkD3</a>
package).</p></li>
</ul>
<div class="sourceCode" id="cb2"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb2-1"><a href="#cb2-1" tabindex="-1"></a><span class="co"># Load package</span></span>
<span id="cb2-2"><a href="#cb2-2" tabindex="-1"></a><span class="fu">library</span>(networkD3)</span>
<span id="cb2-3"><a href="#cb2-3" tabindex="-1"></a></span>
<span id="cb2-4"><a href="#cb2-4" tabindex="-1"></a><span class="co"># Load energy projection data</span></span>
<span id="cb2-5"><a href="#cb2-5" tabindex="-1"></a>URL <span class="ot">&lt;-</span> <span class="st">&quot;https://cdn.rawgit.com/christophergandrud/networkD3/master/JSONdata/energy.json&quot;</span></span>
<span id="cb2-6"><a href="#cb2-6" tabindex="-1"></a>Energy <span class="ot">&lt;-</span> jsonlite<span class="sc">::</span><span class="fu">fromJSON</span>(URL)</span>
<span id="cb2-7"><a href="#cb2-7" tabindex="-1"></a></span>
<span id="cb2-8"><a href="#cb2-8" tabindex="-1"></a><span class="co"># Now we have 2 data frames: a &#39;links&#39; data frame with 3 columns (from, to, value), and a &#39;nodes&#39; data frame that gives the name of each node.</span></span>
<span id="cb2-9"><a href="#cb2-9" tabindex="-1"></a></span>
<span id="cb2-10"><a href="#cb2-10" tabindex="-1"></a><span class="co"># Thus we can plot it</span></span>
<span id="cb2-11"><a href="#cb2-11" tabindex="-1"></a><span class="fu">sankeyNetwork</span>(<span class="at">Links =</span> Energy<span class="sc">$</span>links, <span class="at">Nodes =</span> Energy<span class="sc">$</span>nodes, <span class="at">Source =</span> <span class="st">&quot;source&quot;</span>,</span>
<span id="cb2-12"><a href="#cb2-12" tabindex="-1"></a>              <span class="at">Target =</span> <span class="st">&quot;target&quot;</span>, <span class="at">Value =</span> <span class="st">&quot;value&quot;</span>, <span class="at">NodeID =</span> <span class="st">&quot;name&quot;</span>,</span>
<span id="cb2-13"><a href="#cb2-13" tabindex="-1"></a>              <span class="at">units =</span> <span class="st">&quot;TWh&quot;</span>, <span class="at">fontSize =</span> <span class="dv">12</span>, <span class="at">nodeWidth =</span> <span class="dv">30</span>)</span></code></pre></div>
<div class="sankeyNetwork html-widget html-fill-item" id="htmlwidget-dea70418ad732d9e4681" style="width:864px;height:576px;"></div>
<script type="application/json" data-for="htmlwidget-dea70418ad732d9e4681">{"x":{"links":{"source":[0,1,1,1,1,6,7,8,10,9,11,11,11,15,15,15,15,15,15,15,15,15,15,15,23,25,5,5,5,5,5,27,17,17,28,29,2,2,2,2,2,2,2,2,34,24,35,36,38,37,39,39,40,40,41,42,43,43,4,4,4,26,26,26,44,45,46,47],"target":[1,2,3,4,5,2,4,9,9,4,12,13,14,16,14,17,12,18,19,13,3,20,21,22,24,24,13,3,26,19,12,15,28,3,18,15,12,30,18,31,32,19,33,20,1,5,26,37,37,2,4,1,14,13,15,14,42,41,19,26,12,15,3,11,15,1,15,15],"value":[124.729,0.597,26.862,280.322,81.14400000000001,35,35,11.606,63.965,75.571,10.639,22.505,46.184,104.453,113.726,27.14,342.165,37.797,4.412,40.858,56.691,7.863,90.008,93.494,40.719,82.233,0.129,1.401,151.891,2.096,48.58,7.013,20.897,6.242,20.897,6.995,121.066,128.69,135.835,14.458,206.267,3.64,33.218,4.413,4.375,122.952,839.978,504.287,107.703,611.99,56.587,77.81,193.026,70.672,59.901,19.263,19.263,59.901,0.882,400.12,46.477,525.5309999999999,787.129,79.32899999999999,9.452,182.01,19.013,289.366]},"nodes":{"name":["Agricultural 'waste'","Bio-conversion","Liquid","Losses","Solid","Gas","Biofuel imports","Biomass imports","Coal imports","Coal","Coal reserves","District heating","Industry","Heating and cooling - commercial","Heating and cooling - homes","Electricity grid","Over generation / exports","H2 conversion","Road transport","Agriculture","Rail transport","Lighting & appliances - commercial","Lighting & appliances - homes","Gas imports","Ngas","Gas reserves","Thermal generation","Geothermal","H2","Hydro","International shipping","Domestic aviation","International aviation","National navigation","Marine algae","Nuclear","Oil imports","Oil","Oil reserves","Other waste","Pumped heat","Solar PV","Solar Thermal","Solar","Tidal","UK land based bioenergy","Wave","Wind"],"group":["Agricultural 'waste'","Bio-conversion","Liquid","Losses","Solid","Gas","Biofuel imports","Biomass imports","Coal imports","Coal","Coal reserves","District heating","Industry","Heating and cooling - commercial","Heating and cooling - homes","Electricity grid","Over generation / exports","H2 conversion","Road transport","Agriculture","Rail transport","Lighting & appliances - commercial","Lighting & appliances - homes","Gas imports","Ngas","Gas reserves","Thermal generation","Geothermal","H2","Hydro","International shipping","Domestic aviation","International aviation","National navigation","Marine algae","Nuclear","Oil imports","Oil","Oil reserves","Other waste","Pumped heat","Solar PV","Solar Thermal","Solar","Tidal","UK land based bioenergy","Wave","Wind"]},"options":{"NodeID":"name","NodeGroup":"name","LinkGroup":null,"colourScale":"d3.scaleOrdinal(d3.schemeCategory20);","fontSize":12,"fontFamily":null,"nodeWidth":30,"nodePadding":10,"units":"TWh","margin":{"top":null,"right":null,"bottom":null,"left":null},"iterations":32,"sinksRight":true}},"evals":[],"jsHooks":[]}</script>
</div>
<div id="variation" class="section level1">
<h1>Variation</h1>
<hr />
<p>Sankey diagram are prone to many visual variations, even if the
underlying idea remain the same. Here is an example showing metal
recovery and recycling in Australia (<a
href="http://www.sankey-diagrams.com/tag/australia/">source</a>):</p>
<br><br>
<center>
<img src="IMG/sankey.jpg" alt="img" width="600" height="700">
</center>
<p><br><br></p>
<p>If you’re interested to see more examples, there is a <a
href="http://www.sankey-diagrams.com">whole website about it</a>.</p>
</div>
<div id="mistake" class="section level1">
<h1>Common mistakes</h1>
<hr />
<ul>
<li>The position of nodes is very important: algorythm exist to minimize
the number of crossing between links.</li>
<li>Mind over-cluttering that makes the figure unreadable. It is advised
to dismiss weak connections.</li>
</ul>
</div>
<div id="related" class="section level1">
<h1>Related</h1>
<hr />
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="https://www.data-to-viz.com/graph/network.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img  src="https://github.com/holtzy/data_to_viz/raw/master/img/section/NetworkSmall.png">
<p class="mytitlerelated">
Network
</p>
<p class="mytextrelated">
Represents relationships using nodes and edges.
</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="https://www.data-to-viz.com/graph/arc.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img  src="https://github.com/holtzy/data_to_viz/raw/master/img/section/ArcSmal.png">
<p class="mytitlerelated">
Arc diagram
</p>
<p class="mytextrelated">
A subset of the network diagram where nodes are aligned and edges are
arcs.
</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="https://www.data-to-viz.com/graph/chord.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img  src="https://github.com/holtzy/data_to_viz/raw/master/img/section/ChordSmall.png">
<p class="mytitlerelated">
Chord diagram
</p>
<p class="mytextrelated">
A circular layout used to display weighted relationships between
entities through arcs.
</p>
</a>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="https://www.data-to-viz.com/graph/edge_bundling.html" class="btn btn-primary mybtnrelated" style="margin-bottom:4px;white-space: normal !important;">
<img  src="https://github.com/holtzy/data_to_viz/raw/master/img/section/BundleSmall.png">
<p class="mytitlerelated">
Edge bundling
</p>
<p class="mytextrelated">
Show connections between entities organized in a hierarchy.
</p>
</a>
</div>
</div>
</div>
<div id="code" class="section level1">
<h1>Build your own</h1>
<hr />
<p>The <a
href="https://www.r-graph-gallery.com/sankey-diagram.html">R</a>, <a
href="https://www.python-graph-gallery.com/sankey-diagram/">Python</a>,
<a href="https://www.react-graph-gallery.com/sankey-diagram">React</a>
and <a href="https://d3-graph-gallery.com/sankey.html">D3</a> graph
galleries are 4 websites providing hundreds of chart example, always
providing the reproducible code. Click the button below to see how to
build the chart you need with your favorite programing language.</p>
<p>
<a href="https://www.r-graph-gallery.com/sankey-diagram.html" class="btn btn-primary">R
graph gallery</a>
<a href="https://python-graph-gallery.com/sankey-diagram/" class="btn btn-primary">Python
gallery</a>
<a href="https://www.react-graph-gallery.com/sankey-diagram" class="btn btn-primary">React
gallery</a>
<a href="https://d3-graph-gallery.com/sankey.html" class="btn btn-primary">D3
gallery</a>
</p>
</div>
</div>

          <section
            id="form"
            style="
              margin-top: 70px;
              padding-bottom: 70px;
              padding-top: 70px;
              background-color: #f8f9fa;
            "
          >
            <div class="container">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <h2 style="font-size: 44px" class="text-center">
                  Dataviz decision tree
                </h2>
                <p
                  class="text-center"
                  style="max-width: 600px; font-size: 18px"
                >
                  <a href="https://www.data-to-viz.com">Data To Viz</a> is a
                  comprehensive <b>classification of chart types</b> organized
                  by data input format. Get a high-resolution version of our
                  decision tree delivered to your inbox now!
                </p>
                <div
                  style="
                    margin-top: -50px;
                    width: 100%;
                    display: flex;
                    justify-content: center;
                  "
                >
                  <script
                    async
                    data-uid="8010f15fd2"
                    src="https://prodigious-trailblazer-3628.ck.page/8010f15fd2/index.js"
                  ></script>
                </div>
                <br />
                <div class="text-center">
                  <img
                    class="img-fluid"
                    src="../img/poster/poster_small.png"
                    alt="High Resolution Poster"
                    style="max-width: 400px"
                  />
                </div>
              </div>
            </div>
          </section>

           &nbsp;
<hr />
<p style="text-align: center;">A work by <a href="https://www.yan-holtz.com/">Yan Holtz</a> for <a href="https://data-to-viz.com">data-to-viz.com</a></p>

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Add font awesome icons -->
<p style="text-align: center;">
	<a href="https://twitter.com/r_graph_gallery?lang=en" class="fa fa-twitter"></a>
	<a href="https://www.linkedin.com/in/yan-holtz-2477534a/" class="fa fa-linkedin"></a>
	<a href="https://github.com/holtzy/" class="fa fa-github"></a>
</p>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-79254642-3');
</script>
<script>
var getOutboundLink = function(url) {
	gtag('event', 'click', {
		'event_category': 'outbound',
		'event_label': url,
		'transport_type': 'beacon',
		'event_callback': function(){document.location = url;}
	});
}
</script>

&nbsp;                </div>

    <script>

      // add bootstrap table styles to pandoc tables
      function bootstrapStylePandocTables() {
        $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
      }
      $(document).ready(function () {
        bootstrapStylePandocTables();
      });

          </script>
       </body>
</html>
